<template lang="html">
    <div class="menu-list">
      <div :class="['song',{'menu-active':songShow}]" @click="ShowSong">
          <!-- <router-link to="/singinfo/song"></router-link> -->
          <span>歌曲</span>
      </div>
      <div :class="['zhuan-ji',{'menu-active':zjShow}]" @click="ShowZj">
        <!-- <router-link to="/singinfo/ZhuanJi">专辑</router-link> -->
        <span>专辑</span>
      </div>
      <div :class="['MV',{'menu-active':mvShow}]" @click="ShowMv">
        <!-- <router-link to="/singinfo/MV">MV</router-link> -->
        <span>MV</span>
      </div>
      <div :class="['xiang-qing',{'menu-active':xqShow}]" @click="ShowXq">
        <span>详情</span>
      </div>
      <div class="random-play">
        <span class="play-logo"><img src="../../../assets/images/icon-stop@2x45.png"></span>
        <span class="play-word">随机播放全部</span>
      </div>
  </div>
</template>

<script>
export default {
  name:"Menu-list",
  data(){
    return{
      songShow:true,
      zjShow:false,
      mvShow:false,
      xqShow:false
    }
  },
  methods:{
    ShowSong(){
      this.songShow=true;
      this.zjShow=false;
      this.mvShow=false;
      this.xqShow=false;
    },
    ShowZj(){
      this.songShow=false;
      this.zjShow=true;
      this.mvShow=false;
      this.xqShow=false;
    },
    ShowMv(){
      this.songShow=false;
      this.zjShow=false;
      this.mvShow=true;
      this.xqShow=false;
    },
    ShowXq(){
      this.songShow=false;
      this.zjShow=false;
      this.mvShow=false;
      this.xqShow=true;
    }
  }
}
</script>

<style scoped>
.menu-list{
	width: 100%;
	background-color: #fff;
	font-size: 0.3rem;
	overflow: hidden;
	margin-bottom: 0.01rem;
	position: relative;
	z-index: 11;
}
.menu-list div{
		float: left;
		margin-top: 0.32rem;
		padding-bottom: 0.05rem;
}
.menu-list .menu-active{
	border-bottom:0.04rem solid #c995f5;
  color: #c995f5;
}
.song{
	width:1.75rem;
	text-indent: 0.2rem;
}
.zhuan-ji{
	width:2.21rem;
	text-align: center;
}
.MV{
	width: 2.21rem;
	text-align: center;
}
.xiang-qing{
	width: 1.33rem;
	text-align: right;
}
.xiang-qing span{
  margin-right: 0.2rem;
}
.random-play{
	margin: 0;
	padding: 0;
	border: none;
	width: 100%;
	height: 1.01rem;
	margin-left: 0.2rem;
  border: 0.01rem solid white;
}
.random-play span{
  display: block;
  float: left;
}
.play-logo{
	width: 0.45rem;
	height: 100%;
	margin-right: 0.25rem;
}
.play-logo img{
	width:0.45rem;
	margin-top: 0.33rem;
}
.play-word{
	margin-top: 0.46rem;
}
</style>
